<template>
	<div class="m-header">
		<div class="icon"></div>
		<h1 class="text">Chicken Music</h1>
		<router-link to="/user" class="mine">
			<i class="icon-mine"></i>
		</router-link>
	</div>
</template>

<script>
	export default {
		name: 'MHeader'
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"
	@import "../../common/stylus/mixin"

	.m-header
		position: relative
		height: 44px
		text-align: center
		color: $color-theme
		font-size: 0
	.icon
		display: inline-block
		vertical-align: top
		margin-top: 6px
		width: 30px
		height: 32px
		margin-right: 9px
		bg-image('logo')
		background-size: 30px 32px
	.text
		display: inline-block
		vertical-align: top
		line-height: 44px
		font-size: $font-size-large
	.mine
		position: absolute
		top: 0
		right: 0
		.icon-mine
			display: block
			padding: 12px
			font-size: 20px
			color: $color-theme
</style>